<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>TurboJS Benchmarks</title>

  <script type="text/javascript" src="js/turbo.js"></script>
  <script type="text/javascript" src="js/benchmark.js"></script>
	<link rel="stylesheet" type="text/css" href="css/turbo.css" />
<style type="text/css">
/* jsperf */
html,body,h1,h2,h3,fieldset,#faq,#faq dt,#faq dd,iframe{margin:0;padding:0;border:0}table,p,ul,h1,h2,h3,#error-info,iframe{margin-bottom:1em}button,input,textarea,a{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}html,input,textarea,button{font:1em/1.5 Helvetica,Arial,sans-serif}html{background:#c4c4c4;height:100%}body{background:#fff;border:1px solid #aaa;border-width:0 1px;width:55em;padding:0 2.5em;margin:0 auto;min-height:100%}a{color:#357ab0;padding:.2em}a:hover,a:focus{text-decoration:none}table{width:100%;border-collapse:collapse}thead th,caption,button:hover,button:focus,.submit:hover,.submit:focus,a:hover,a:focus,#comments .meta a:hover,#comments .meta a:focus,li.current a:hover,li.current a:focus,form h3,#comments .owner .meta{background:#1a6ab9;background-image:-moz-linear-gradient(top,#6ca5dd,#1a6ab9);background-image:-webkit-gradient(linear,left top,left bottom,from(#6ca5dd),to(#1a6ab9));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#6ca5dd',EndColorStr='#1a6ab9');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#6ca5dd',EndColorStr='#1a6ab9')";color:#fff}caption,#comments .meta{background:#bcbcbc;background-image:-moz-linear-gradient(top,#d0d0d0,#a7a7a7);background-image:-webkit-gradient(linear,left top,left bottom,from(#d0d0d0),to(#a7a7a7));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d0d0d0',EndColorStr='#a7a7a7');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d0d0d0',EndColorStr='#a7a7a7')";color:#555}thead th,caption{font-weight:bold}tbody th{background:#dde4ea;border:1px solid #b4b4b4;border-width:0 1px 1px 0}.js tbody th:hover,.js tbody th:focus{text-decoration:underline;cursor:pointer}td{border:1px solid #b4b4b4;border-width:0 1px 1px 0}td.results{border-right:0;text-align:center}.results span{display:block;font-size:.8em}tr:last-child td,tr:last-child th{border-bottom:0}td,th,caption{padding:.2em .5em}td.fastest{background:#9cee82}td.slowest,td.error{background:pink}td.error{text-transform:uppercase;font-weight:bold}button,.submit{padding:.35em .5em;cursor:pointer;color:#000;border:1px solid #999;background:#dadada;background-image:-moz-linear-gradient(top,#ebebeb,#b8b8b8);background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#b8b8b8));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ebebeb',EndColorStr='#b8b8b8');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ebebeb',EndColorStr='#b8b8b8')"}a:hover span,a:focus span{color:#fff}#run,.buttons{float:right}button:hover,button:focus,.submit:hover,.submit:focus{border-color:#357ab0}#add-buttons button{padding:.15em .4em;font-size:11px;font-weight:bold}iframe{width:100%;height:450px;resize:vertical}form div{margin-bottom:1em}label{float:left;width:14em;cursor:pointer;text-align:right;margin-right:1em;padding:.4em}label.inline{float:none;padding:0;margin:0}label[for=visible]{position:relative;top:-.37em}.submit{cursor:pointer}label span{display:block;font-size:90%;color:#b4b4b4}label em{color:red;font-style:normal}textarea{width:42.6em;_width:42.4em;height:15em;resize:vertical}input,textarea{border:1px solid #b4b4b4;padding:.4em}form h2,form h3,form h4,p.error,.preview,#add-libraries,#add-buttons{padding-left:250px;display:block}.js .question{display:none}pre{width:100%;overflow:auto}table pre{max-width:40em;*padding-bottom:2em;_width:40em}table #results-1{width:5em;*width:6em}mark{background:#ff9;padding:.2em .1em}:focus:invalid,.invalid{background:pink}.error{color:#b00b00}#add-test{margin-right:.3em}#run{margin-top:-.4em;display:none}.js #run{display:block}#faq{margin-bottom:1em}#faq dt{margin-top:1em;font-weight:bold}#faq dt:target,#faq dt:target+dd{background:lightgreen;padding:.5em .8em 0 .8em}#faq dt:target+dd{padding-top:0;padding-bottom:.5em}#error-info.show,.meta strong,#status strong{background:pink;border:1px solid #b00b00;padding:1em}.meta strong,#status strong{padding:.4em}h1,h2,h3,h4{font-weight:bold;font-size:1em}h1{padding-top:1em;font-size:1.4em}hgroup h2{display:none}form h3{padding-top:.2em;padding-bottom:.2em}h1 em{font-style:normal}h1 strong{font-style:italic;font-family:Monaco,'Lucida Console',monospace}li.current a{background:lightgreen}#status span{display:none}.js #status span{display:inline}#comments .meta,#comments .meta img{position:absolute;left:0;top:0;margin:0}#comments .meta img{top:2px;left:2px}#comments .meta{padding-left:35px;top:0;width:843px;line-height:30px}#comments .meta a{font-weight:bold;color:#555}#comments .owner .meta a{color:#fff}#comments article div{margin-top:30px;padding:.2em 1em 0}#comments article{display:block;border:1px solid #b4b4b4;position:relative;margin-bottom:1em}#comments article:target{background:#dde4ea}footer{display:block;margin-top:2em;padding:.5em 0 1.5em;border-top:2px solid #c4c4c4}#error-info,code,samp,var,textarea{font-family:Monaco,'Courier New',monospace;font-size:.9em}.co1,.co2,.coMULTI{font-style:italic}.imp{color:red}.kw1,.kw3{color:#006}.kw2{color:#036}.co1{color:#060}.co2{color:#096}.coMULTI{color:#060}.es0{color:#009}.br0{color:#090}.sy0{color:#393}.st0{color:#36c}.nu0{color:#c00}.me1{color:#606}
</style>
    </head>
    <body style="background: white">

<!-- Benchmark -->
<h1>Benchmark Testing</h1>
<button id="run">Run tests</button>
<p id="status"></p>
<table id="test-table">
 <caption>Testing in <span id="user-agent"></span></caption>
 <thead>
  <tr>
   <th>Test</th>
   <th title="Operations per second (higher is better)">Ops/sec</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row" id="title-1">Browser Detect <span id="extra-1"></span></th>
   <td id="results-1" class="results">pending</td>
  </tr>
  <tr>
   <th scope="row" id="title-2">Notifications <span id="extra-2"></span></th>
   <td id="results-2" class="results">pending</td>
  </tr>
  <tr>
   <th scope="row" id="title-3">getById <span id="extra-3"></span></th>
   <td id="results-3" class="results">pending</td>
  </tr>
  <tr>
   <th scope="row" id="title-4">Accordion <span id="extra-4"></span></th>
   <td id="results-4" class="results">pending</td>
  </tr>
<!--
  <tr>
   <th scope="row" id="title-5">Carousel <span id="extra-5"></span></th>
   <td id="results-5" class="results">pending</td>
  </tr>
-->
  <tr>
   <th scope="row" id="title-6">Activity Indicator <span id="extra-6"></span></th>
   <td id="results-6" class="results">pending</td>
  </tr>
  <tr>
   <th scope="row" id="title-7">Tooltip <span id="extra-6"></span></th>
   <td id="results-7" class="results">pending</td>
  </tr>
  <tr>
   <th scope="row" id="title-8">Lightbox <span id="extra-6"></span></th>
   <td id="results-8" class="results">pending</td>
  </tr>
  <tr>
   <th scope="row" id="title-9">getByClass <span id="extra-9"></span></th>
   <td id="results-9" class="results">pending</td>
  </tr>
 </tbody>
</table>

<script type="text/javascript">
  benchmark.test('Browser Detect', 1, function () {
    Turbo.getBrowser();
  });

  benchmark.test('Notification', 2, function () {
    new Turbo.Notification('Benchmark Testing', { id: 'notifyme' })
  });

  benchmark.test('getById', 3, function () {
    Turbo.$('test-table');
  });

  benchmark.test('Accordion', 4, function () {
    new Turbo.Accordion('accordion', 'toggle', 'element');
  });

/*
  benchmark.test('Carousel', 5, function () {
    var carousel = new Turbo.Carousel('carousel', 'content', { overflow: true });
  });
*/

  benchmark.test('Activity Indicator', 6, function () {
    Turbo.ActivityIndicator.show(false);
  });

  benchmark.test('Tooltip', 7, function () {
    new Turbo.Tooltip(Turbo.$('tooltip-anchor'), '#tooltip-content');
  });

  benchmark.test('Lightbox', 8, function () {
    Turbo.Lightbox.show('#lightbox-content');
  });

  benchmark.test('getByClass', 9, function () {
    Turbo.$$(Turbo.$('accordion'), 'element');
  });
</script>

<h1 id="tooltip-anchor">Testing HTML</h1>

<div id="accordion">

<h2 class="toggle">Lipsum</h2>
<p class="element">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque ultrices odio. Suspendisse eu augue. Morbi bibendum mauris at leo. Curabitur egestas viverra ligula. Praesent egestas ullamcorper elit. Maecenas et sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris suscipit viverra neque. Nam et magna quis massa sagittis feugiat. Proin ut lacus quis augue pulvinar ornare. </p>

<h2 class="toggle">Lipsum 2</h2>
<p class="element">Proin in ligula. Praesent eu diam. Nam vitae pede eget ante iaculis blandit. Donec auctor vehicula lacus. Nullam feugiat sodales justo. Aenean ut diam vitae eros suscipit commodo. Donec tempor euismod eros. Praesent suscipit malesuada est. Praesent cursus, lorem ac convallis faucibus, ligula sapien pulvinar dui, eu rutrum nibh nulla et mi. Fusce elit sapien, faucibus sit amet, feugiat vitae, ullamcorper id, dui. Curabitur eros mi, interdum ac, aliquet id, molestie rutrum, metus. Vivamus mauris libero, auctor vel, facilisis vitae, feugiat vitae, dui. Vestibulum blandit porttitor tortor. Vestibulum sed ligula. Proin tristique pretium tellus. Morbi interdum, turpis nec fringilla suscipit, ante leo mollis purus, at scelerisque dolor magna tincidunt velit.</p>
</div>

<!--
<div id="carousel">
  <div class="content">
  	<h3>1 DOLOR SIT AMET</h3>
  	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>
  </div>

  <div class="content">
  	<h3>2 LOREM IPSUM</h3>
  	<p>Suspendisse aliquam ante a nisi. Pellentesque in justo. Curabitur sed arcu. Etiam est purus, dictum ac, ullamcorper a, vestibulum sed, ipsum. Vivamus mollis consectetuer turpis. Ut sollicitudin, nunc quis molestie sollicitudin, dui urna fringilla mi, et lobortis urna nibh ut neque. Proin id nibh. Nulla cursus mollis libero. Fusce in est. Maecenas tempus. Integer id mauris. Ut ut quam. Nunc fringilla erat sed quam. Sed libero. Morbi eu tortor. Mauris non ligula in magna tincidunt pretium. Pellentesque et eros. Curabitur pellentesque scelerisque diam. Pellentesque euismod nibh vel mi. Vestibulum sit amet nibh vel lectus viverra aliquet.</p>
  </div>
</div>
-->

<div id="tooltip-content" style="display: none">
  <div class="trTooltip-title">
    Title
  </div>
  <div class="trTooltip-content">
    This will appear in a tooltip
  </div>
</div>

<div id="lightbox-content" style="display: none">
  <div class="trLightbox-title">
    Title
  </div>
  <div class="trLightbox-content">
    This will appear in a lightbox
  </div>
</div>

</body>
</html>
